<template>
  <div class="home">
    <div style="height: 110px"></div>
    <index-carousel></index-carousel>
    <navigation-index></navigation-index>
    <div class="title">
      <div style="margin-left: 20px">最新热播</div>
      <div style="margin-right: 20px;width: 10px;height: 10px"><img src="@/assets/icon/index/right.png" alt=""></div>
    </div>
    <index-blocks></index-blocks>
    <div class="Placeholder"></div>
  </div>
</template>

<script>

import Navigation from "@/components/content/navigation/NavigationBottom.vue";

import TopBarTv from "@/components/views/index/topBar.vue";
import IndexNavBar from "@/components/views/index/IndexNavBar.vue";
import IndexCarousel from "@/components/views/index/tv/IndexCarousel.vue";
import NavigationIndex from "@/components/views/index/tv/NavigationIndex.vue";
import IndexBlocks from "@/components/views/index/tv/IndexBlocks.vue";

export default {
  name: 'television',
  components: {
    IndexBlocks,
    NavigationIndex,
    IndexCarousel,
    IndexNavBar,
    TopBarTv,
    Navigation
  },
  methods:{
    handleRedirect(index){
      this.$emit('handle',index)
    }
  }
}
</script>
<style scoped lang="scss">
.home {
  background-image: -moz-linear-gradient(-90deg, rgb(237, 61, 196) 0%, rgb(237, 79, 173) 24%, rgba(236, 134, 104, 0) 100%);
  background-image: -webkit-linear-gradient(-90deg, rgb(237, 61, 196) 0%, rgb(237, 79, 173) 24%, rgba(236, 134, 104, 0) 100%);
  background-image: -ms-linear-gradient(-90deg, rgb(237, 61, 196) 0%, rgb(237, 79, 173) 24%, rgba(236, 134, 104, 0) 100%);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 390px;
  height: 250px;
}
.title{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  text-align: center;
  align-items: center;
  margin-bottom: 10px;
}
.Placeholder{
  height: 62px;
}
</style>
